import React, { useState } from "react";
import { AiOutlineMinus, AiOutlinePlus } from "react-icons/ai";


interface Props{
  min:number,
  max:number,
  defaultValue?:number,
  onChange?:(count:number)=>void
}

export const NumberBox = (props:Props)=>{
  let [count,setCount] = useState(props.defaultValue || 1);

  const add = ()=>{
    if(count == props.max){
      return;
    }
    count = count+1;
    setCount(count)
    props.onChange&&props.onChange(count)
  }
  const reduce = ()=>{
    if(count == props.min){
      return;
    }else{
      count = count-1;
      setCount(count)
    }
    props.onChange&&props.onChange(count)
  }

  

  return(
    <div 
      style={{
        border:"1px solid #69c0ff",
        display:"flex",
        alignItems:"center",
        justifyContent:"space-between",
        width:112
      }}>
      <div onClick={reduce} style={{width:36,height:30,display:"flex",justifyContent:"center",alignItems:"center",borderRight:"1px solid #69c0ff",cursor:"pointer"}}>
        <AiOutlineMinus/>
      </div>
      
      <span style={{padding:"0px 6px"}}>{count}</span>

      <div onClick={add} style={{width:36,height:30,display:"flex",justifyContent:"center",alignItems:"center",borderLeft:"1px solid #69c0ff",cursor:"pointer"}}>
        <AiOutlinePlus/>
      </div>
    </div>
  )
}